<template>
	<view>
		<view class="title">客户信息</view>
		<view class="nav">
			<view class="uni-flex uni-btm uni-none">
				<view class="box1">用户号：</view>
				<view class="box2">{{list.custNo}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">反映人：</view>
				<view class="box2">{{list.custName}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">单位：</view>
				<view class="box2">{{list.custWorkUnit}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">联系电话：</view>
				<view class="box2 uni-btn" @click="callPhont(list.custConnectionTel)">
					<view>{{list.custConnectionTel}}</view>
					<image style="width: 25px;height: 25px;" src="../../static/a14.png" mode=""></image>
				</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">手机号码：</view>
				<view class="box2 uni-btn" @click="callPhont(list.custTel)">
					<view>{{list.custTel}}</view>
					<image style="width: 25px;height: 25px;" src="../../static/a14.png" mode=""></image>
				</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">地址：</view>
				<view class="box2">{{list.custAddress}}</view>
			</view>
		</view>
		
		<view class="title">工单信息</view>
		<view class="nav">
			<view class="uni-flex uni-btm">
				<view class="box1">备注信息：</view>
				<view class="box2">{{ list.remark }}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">到场时限：</view>
				<view class="box2">{{ list.onsiteTime }}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">处理时限：</view>
				<view class="box2">{{ list.operationTime }}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">工单类型：</view>
				<view class="box2">{{list.orderType}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">反映类别：</view>
				<view class="box2">{{list.rebackType}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">反映内容：</view>
				<view class="box2">{{list.rebackContent}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">反映地区：</view>
				<view class="box2">{{list.rebackAdress}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">反映片区：</view>
				<view class="box2">{{list.rebackArea}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">受理部门：</view>
				<view class="box2">{{list.departmentName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderID:'',
			list:[],
		};
	},
	onLoad(e) {
		this.orderID = e.id;
		this.my_detail()
	},
	methods: {
		// 拨打电话
		callPhont(phone) {
			if (!phone) {
				uni.showToast({
					title: '号码错误',
					icon: 'none'
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {
					console.log('调用成功!');
				},
				fail: res => {
					console.log('调用失败!');
				}
			});
		},
		my_detail() {//工单详情
			var that = this;
			uni.request({
				url: '/app/wechatApi/wechatOrder/getWechatOrderDetail',
				method: 'GET',
				data: {
					orderId: that.orderID,
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						// console.log(res)
						that.list = res.data.data[0]
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},
		
	}
};
</script>

<style>
page {
	background: #f8f7f7;
}
.title {
	padding-left: 20upx;
	padding: 20upx;
	color: #007AFF;
}
.nav {
	background: #ffffff;
	border-top: none;
}

.uni-btm {
	white-space: normal;
	padding: 20upx;
	background: #8ef7c9;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #FFFFFF;
}

.uni-btm2 {
	white-space: normal;
	padding: 20upx;
	background: #EEEEEE;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #FFFFFF;
}

.uni-height {
	height: 150upx;
}
.box1 {
	white-space: nowrap;
	width: 150upx;
}
.box2 {
	width: 580upx;
}
.box3 {
	color: #bdbdbd;
	height: 160upx;
	width: 580upx;
}
.uni-box {
	display: flex;
	justify-content: space-around;
	align-content: center;
	text-align: center;
	color: #ffffff;
	width: 100%;
	margin: 100upx 0;
}
.uni-box view {
	padding: 5upx 35upx;
	border-radius: 5upx;
}
.done {
	background: #4a98ee;
}
.postpone {
	background: #d43030;
}
.turn-up {
	background: #4a98ee;
	width: 100%;
	text-align: center;
	color: #ffffff;
	padding: 10upx 0;
	margin-top: 80upx;
}
</style>
